<template>
  <div>
    <pro-table
      :columns="columns"
      :request="fetchAgreements"
      row-key="id"
      :pagination="pagination"
      :action-ref="setActionRef"
      :search="false"
      header-title=""
    >
      <template #option-render="{ dom }">
        <!-- <a-button type="primary" @click="handleAdd">添加</a-button> -->
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #action="{ record }">
        <!-- <a-popconfirm content="确认删除么"  @ok="handleDelete(record.id)">
          <a-button type="text" status="danger">删除</a-button>
        </a-popconfirm> -->
       
        <a-button v-auth="'agreementEditBtn'" type="text" @click="handleEdit(record)">编辑</a-button>
        <a-button v-auth="'agreementLogBtn'" type="text" @click="handleLogs(record.id)">查看日志</a-button>
        <!-- <a-button type="text" @click="handleDetail(record.id)">详情</a-button> -->
      </template>
    </pro-table>
    <a-modal v-model:visible="detailVisible" title="协议详情">
      <p>{{ detail.title }}</p>
      <p>{{ detail.content }}</p>
      <p>{{ detail.status }}</p>
    </a-modal>
    <a-modal v-model:visible="formVisible" :title="formTitle">
      <a-form ref="formRef" :model="formData" layout="vertical">
        <a-form-item label="标题" :rules="[{ required: true, message: '请输入标题' }]">
          <a-input v-model="formData.title" placeholder="请添加协议" />
        </a-form-item>
        <a-form-item label="内容">
          
          <TEditor :toolbar="[]" v-model="formData.content" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model="formData.status">
            <a-option :value="0">启用</a-option>
            <a-option :value="1">禁用</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="formVisible = false">取消</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </template>
    </a-modal>

    <a-modal v-model:visible="logVisable" title="日志明细" width="60%">
      <pro-table header-title="" :action-ref="setLogActionRef"  :search="false" :request="(params)=>getAgreementLogList({params,condition:{agreementId:id}})" :columns="logColumns"></pro-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
import {
  getAgreementList,
  deleteAgreement,
  getAgreementDetail,
  saveAgreement,
  getAgreementLogList
} from '@/api/agreement';
import { FormInstance } from '@arco-design/web-vue';
import TEditor from "@/components/TEditor/index.vue";

export default defineComponent({
  components:{
    TEditor
  },
  name: 'AgreementPage',
  setup() {
    const formRef = ref<FormInstance | null>(null);
    const columns = [
      { title: 'ID', dataIndex: 'id',hideInSearch: true },
      { title: '标题', dataIndex: 'title' },
      { title: '创建时间', dataIndex: 'createTime',hideInSearch: true },
      {
        title: '状态',
        dataIndex: 'status',
        valueEnum: {
          0: { text: '启用', status: 'Success' },
          1: { text: '禁用', status: 'Default' },
        },
      },
      {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 300,
        hideInSearch: true
      },
    ];

    const logColumns = [
      {
        title:'操作内容',
        dataIndex:'content'
      },
      {
        title:'操作内容',
        dataIndex:'createTime'
      },{
        title:'操作人',
        dataIndex:'createUserName'
      }
    ];

    const actionRef = ref();
    const logActionRef = ref()
    const logVisable = ref(false);
    const id = ref(0);
    const setActionRef = (ref: Ref) => {
      actionRef.value = ref;
    };
    const setLogActionRef = (ref: Ref) => {
      logActionRef.value = ref;
    };

    const onReload = () => {
      if (actionRef.value) {
        actionRef.value.reload();
      }
    };

    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    const detail = ref({
      title: '',
      content: '',
      status: 0,
    });

    const detailVisible = ref(false);
    const handleLogs = (objid)=>{
      console.log(objid)
      id.value = objid
      logVisable.value = true
      logActionRef.value.reload();
    }
    const formVisible = ref(false);
    const formTitle = ref('添加协议');
    const formData = ref({
      id: undefined,
      title: '',
      content: '',
      status: 0,
    });

    const fetchAgreements = async (params: {
      current: number;
      pageSize: number;
    }) => {
      const response = await getAgreementList(params.current, params.pageSize);
      pagination.value.total = response.data.total;
      return {
        data: response.data.list,
        success: true,
        total: response.data.total,
      };
    };

    const handleDelete = async (id: number) => {
      await deleteAgreement(id);
      onReload();
    };

    const handleDetail = async (id: number) => {
      const response = await getAgreementDetail(id);
      detail.value = response.data;
      detailVisible.value = true;
    };

    const handleAdd = () => {
      formTitle.value = '添加协议';
      formData.value = {
        id: undefined,
        title: '',
        content: '',
        status: 0,
      };
      formVisible.value = true;
    };

    const handleEdit = async (record: any) => {
      const response = await getAgreementDetail(record.id);
      formTitle.value = '编辑协议';
      formData.value =  detail.value = response.data;
      formVisible.value = true;
    };

    const handleSubmit = async () => {
      try {
        await formRef.value?.validate();
        await saveAgreement(formData.value);
        formVisible.value = false;
        onReload();
      } catch (error) {
        console.error('表单校验失败', error);
      }
    };

    return {
      columns,
      pagination,
      detail,
      detailVisible,
      formVisible,
      formTitle,
      formData,
      fetchAgreements,
      handleDelete,
      handleDetail,
      handleAdd,
      handleEdit,
      handleSubmit,
      setActionRef,
      formRef,
      handleLogs,
      logVisable,
      getAgreementLogList,
      logColumns,
      id,
      setLogActionRef
    };
  },
});
</script>